<template>
	<section class="detail-order">
		<mt-header :title="this.gold?'模拟交易':'实盘交易'">
			<router-link to="/order" slot="left">
				<mt-button icon="back" />
			</router-link>
			<!-- <mt-button icon="more" slot="right"></mt-button> -->
		</mt-header>
		<Chart />
		<Board :curOrder="curOrder" :setStopWinLoss="(item)=>this.$refs.winloss.setStopWinLoss(item)"/>
		<!-- 显示金额等信息 -->
		<p class="action-btn fs14 white pb10 pt5" v-show="curOrder.orderStatus==2">
			<span class="lh40 bgyellow ml5" @click.stop="sellBuy">平仓追反单</span>
			<span class="lh40 bgred ml5 mr5" @click.stop="buy">追单</span>
			<span class="lh40 bggreen mr5" @click.stop="sell">平仓</span>
		</p>
		<!-- 设置止盈止损 -->
		<Winloss ref="winloss" v-show="showSetWinLoss" :curOrder="curOrder" :gold="gold" :lastPrice="lastPrice" :showSetWinLoss="(show)=>showSetWinLoss=show" />
		<!-- 追单 -->
		<Append ref="append" v-show="showBuyItem" :curOrder="curOrder" :lastPrice="lastPrice" :showBuyItem="(show)=>showBuyItem=show" :gold="gold"/>
	</section>
</template>
<script>
	import { mapState, mapGetters, mapMutations } from "vuex";
	import Chart from '@views/chart/index.vue'
	import Board from './subPage/board.vue'
	import Winloss from './subPage/winloss.vue'
	import Append from './subPage/append.vue'
	import { orderNewOrderFindNewOrderList, orderNewOrderUnwindNewOrder } from '@api/order.js'

	export default {
		name: "orderDetail",
		data() {
			return {
				winLossIcon: "./static/imgs/winlossicon.svg",
				curOrder: {
                    orderStatus: 2,
                },
				//设置止盈止损
				showSetWinLoss: false,
				//保存当前类型是追单 还是平仓并追单 add/ reverseAdd

				//追单
				showBuyItem: false,
				lastPrice: 0,
				// curBuyItem: { lastPrice: 0 },
				// curBuyHand: 0.1
			};
		},
		components: {
			Chart,
			Board,
			Winloss,
			Append,
		},
		mounted() {
			// 创建图表 先创建图表，完成后再加载订单
			this.initVariety()
		},
		beforeDestroy() {
			clearTimeout(this.orderDetailTimer);
			clearTimeout(window.UDFTimer);
		},
		computed: {
			...mapState(["gold","curQuota",]),
			
		},
		methods: {
			...mapMutations([
				"setGold",
			]),
			initVariety() {
				const { batchNo, varietyType, gold,contractsCode } = this.$route.query
				this.$store.commit('setGold',gold)
				this.getOrder(batchNo, gold, contractsCode);
			},
			getOrder(batchNo, gold, contractsCode) {
				this.$store.dispatch('getCurQuota',{contractsCode})
				orderNewOrderFindNewOrderList({
					payType: gold ? 0 : 1,
					batchNo //加上这个参数，只查询当前订单
				}).then(res => {
					if (res.code === 200) {
						if (res.data.length === 0 && this && !this._isDestroyed) {
							MessageBox.alert("订单已被平仓", "查询订单").then(action => this.$router.push({path: "/historyOrder"}))
						} else {
							res.data.map((value, idx) => {
								if (value.batchNo === batchNo) {
									const v = this.curQuota;
									const pointMoney =
										+value.eachPointMoney * value.beatFewPoints;
									if (value.direction == 1) {
										var money =
											(v.lastPrice - value.realAvgPrice) *
											value.eachPointMoney *
											value.handsNum *
											value.tradeRate;
									}
									if (value.direction == 0) {
										var money =
											(value.realAvgPrice - v.lastPrice) *
											value.eachPointMoney *
											value.handsNum *
											value.tradeRate;
									}

									value["lastPrice"] = v.lastPrice;

									// 追单选项的时时价写入
									this.lastPrice = v.lastPrice

									value["openPrice"] = v.openPrice;
									value["pointMoney"] = pointMoney;
									value["earnMoney"] = money;

									this.curOrder = value;
								}
							});
						}
					} else if (res.code === 503) {
						Toast("请先登录");
						this.$router.push({path: "/login"});
					} else {
						MessageBox(res.msg ? res.msg : "出错");
					}
					// 返回订单的长度
					return res.data.length;
				}).then(res => {
					clearTimeout(this.orderDetailTimer)
					if (this && this._isDestroyed) return
					this.orderDetailTimer = setTimeout(() => {
						this.getOrder(batchNo, gold, contractsCode);
					}, 2000);
				})
			},
			setStopWinLoss(item) {
				this.$refs.winloss.setStopWinLoss(item)
			},
			buy() {
				this.$refs.append.buy()
			},
			sellBuy(){
				this.$refs.append.sellBuy()
			},
			//平仓
			sell() {
				orderNewOrderUnwindNewOrder({
					payType: this.gold ? 0 : 1,
					batchNo: this.curOrder.batchNo,
					unwindPrice: this.curOrder.lastPrice
				},'平仓中···').then(res => {
					if (res.code == 200) {
						MessageBox.alert(res.msg, "平仓").then(action => {
							this.removeWidget();
							this.$nextTick(() => {
								this.$router.push({
									path: "/order"
								});
							});
						});
					} else {
						Toast(res.msg);
					}
				});
			},
			
		},
	};
</script>
<style lang="scss" scoped>
    .detail-order{
        height: 100%;
        display: flex;
        flex-direction: column;
    }
	.gold .active {
		color: #ee9b2e;
	}

	.nav-wrap {
		background-color: #353642;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.nav-wrap p span {
		height: rem(4px);
		width: 1rem;
		border-radius: 2px;
	}

	.nav ul li {
		width: 25%;
		text-align: center;
	}

	.br2 {
		border-radius: 2px;
	}

	.nav ul li span {
		display: inline-block;
		background-color: #4c4c57;
		width: 80%;
		border-radius: 2px;
		font-size: rem(14px);
		margin-top: rem(8px);
		line-height: rem(28px);
	}

	.nav ul li.select span {
		background-color: #ee9b2e;
	}

	.back {
		position: absolute;
		top: rem(1px);
		left: rem(10px);
		line-height: rem(40px);
		text-align: center;
		width: rem(30px);
		height: rem(40px);
	}

	.teach {
		position: absolute;
		top: 0;
		right: rem(10px);
		line-height: rem(40px);
		text-align: center;
		height: rem(40px);
	}

	ol {
		border-top: 1px solid #666;
	}

	ol li {
		width: 50%;
		line-height: rem(30px);
		font-size: rem(14px);
		box-sizing: border-box;
		color: #999;
		border-right: 1px solid #666;
		border-bottom: 1px solid #666;
	}

	ol li:nth-of-type(even) {
		border-right: 0 none;
	}

	ol li em,
	ol li span {
		white-space: nowrap;
	}

	.timeToggle {
		position: relative;
	}

	.timeToggle::after {
		content: "";
		width: 0;
		height: 0;
		border: rem(6px) solid transparent;
		border-bottom-color: #feaa37;
		position: absolute;
		bottom: rem(-5px);
		right: rem(-6px);
		transform: rotate(135deg);
	}

	.timeToggle div {
		position: absolute;
		top: rem(30px);
		right: 0;
		min-width: rem(60px);
		background-color: #fff;
		border-radius: rem(2px);
		box-shadow: 0 0 rem(4px) rgba(0, 0, 0, 0.3);
		font-size: rem(14px);
		line-height: rem(30px);
		white-space: nowrap;
		z-index: 99;
	}

	.timeToggle div p {
		border-bottom: 1px solid #e2e2e2;
	}

	.timeToggle div p:last-child {
		border-bottom: 0 none;
	}

	.toggle {
		line-height: rem(30px);
		margin-top: rem(10px);
		margin-left: auto;
		margin-right: auto;
		width: 50%;
	}

	.toggle span {
		border: 1px solid #000;
		line-height: rem(28px);
		width: 50%;
		box-sizing: border-box;
	}
	.toggle span:nth-child(1) {
		border-right: 1px solid #000;
		border-top-left-radius: rem(2px);
		border-bottom-left-radius: rem(2px);
	}
	.toggle span:nth-child(2) {
		border-top-right-radius: rem(2px);
		border-bottom-right-radius: rem(2px);
	}
	.toggle span.select {
		color: #fff;
		border-color: #fff;
	}

	.action-btn {
		width: 100%;
		display: flex;
        background-color: #fff;
	}

	.action-btn span {
		width: 30%;
		flex: 1;
		border-radius: rem(4px);
        line-height: rem(40px);
        height: rem(40px);
	}

	.hold {
		border-radius: rem(2px);
		width: rem(50px);
		position: absolute;
		top: rem(50px);
		right: rem(10px);
		z-index: 99;
		color: #202734;
	}
	.yellow {
		color: #ee9b2e;
	}

	.bgyellow {
		background-color: #ef9d2e;
	}
	.bggray {
		background-color: #aaa;
	}
	/*动画*/
	.slide-fade-enter-active {
		transition: all 0.2s ease;
	}

	.slide-fade-leave-active {
		transition: all 0.2s ease;
	}

	.slide-fade-enter,
	.slide-fade-leave-to

	/* .slide-fade-leave-active for below version 2.1.8 */
		{
		transform: translateY(100%);
	}
</style>